<template>
    <page-body>
        <view class="page">
            <view class="flex flex-wrap align-center justify-between benben-position-layout flex Rzrider_flex_0" :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
                <view class='flex flex-wrap align-center Rzrider_fd0_0' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
                    <image class='Rzrider_fd0_0_c0' mode="aspectFit" :src='STATIC_URL+"141.png"'></image>
                </view>
                <text class='Rzrider_fd0_1'>骑手认证</text>
                <view class='flex flex-wrap align-center Rzrider_fd0_0'>
                </view>

            </view>
            <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
            <!---flex布局flex布局开始-->
            <view class="flex benben-flex-layout flex-wrap align-center" v-if="rider_background">
                <image class='Rzrider_fd1_0' mode="aspectFill" :src='rider_background'></image>
            </view>

            <!---flex布局flex布局结束-->
            <!---认证信息flex布局开始-->
            <view class="flex flex-direction align-stretch benben-flex-layout">
                <view class='flex flex-direction align-stretch Rzrider_fd2_0'>
                    <view class='flex align-center justify-between Rzrider_fd2_0_c0'>
                        <text class='Rzrider_fd2_0_c0_c0'>姓名</text>
                        <benben-input class='flex-sub Rzrider_fd2_0_c0_c1' type="text" :placeholder="`请输入姓名`" confirm-type="done" :maxlength="12" placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx" v-model="input1" />
                    </view>
                    <view class='flex align-center justify-between Rzrider_fd2_0_c0'>
                        <text class='Rzrider_fd2_0_c0_c0'>手机号</text>
                        <benben-input class='flex-sub Rzrider_fd2_0_c0_c1' type="number" :placeholder="`请输入手机号`" confirm-type="done" :maxlength="11" placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx" v-model="input2" />
                    </view>
                    <view class='flex align-center justify-between Rzrider_fd2_0_c0' @tap.stop="pickerDiy1716543663601=true">
                        <text class='Rzrider_fd2_0_c0_c0'>性别</text>
                        <benben-input class='flex-sub Rzrider_fd2_0_c0_c1' type="text" :placeholder="`请选择`" confirm-type="done" :maxlength="100" 
						:disabled='true' placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx" v-model="sexLable" />
                        <image class='Rzrider_fd2_0_c2_c2' mode="aspectFit" :src='STATIC_URL+"38.png"'></image>
                    </view>
                    <view class='flex align-center justify-between Rzrider_fd2_0_c0' @tap.stop="pickerDiy1716542865565=true">
                        <text class='Rzrider_fd2_0_c0_c0'>学校</text>
                        <benben-input class='flex-sub Rzrider_fd2_0_c0_c1' type="text" :placeholder="`请选择`" confirm-type="done" :maxlength="20" :disabled='true' placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx" v-model="schoolLable" />
                        <image class='Rzrider_fd2_0_c2_c2' mode="aspectFit" :src='STATIC_URL+"38.png"'></image>
                    </view>
                    <view class='flex align-center justify-between Rzrider_fd2_0_c0'>
                        <text class='Rzrider_fd2_0_c0_c0'>学号</text>
                        <benben-input class='flex-sub Rzrider_fd2_0_c0_c1' type="number" :placeholder="`请输入学号`" confirm-type="done" :maxlength="18" placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx" v-model="input3" />
                    </view>
                    <view class='flex flex-direction align-stretch self-center justify-between Rzrider_fd2_0_c5'>
                        <text class='Rzrider_fd2_0_c5_c0'>学生证或身份证图片(身份证需上传正反面)</text>
                        <benben-images-upload ref="benbenImagesUploadfd2_0_c5_c1" :img-list.sync="input4" :is-show-tips='true' :maxlength="2">
                            <template #content="{ num, maxlength, isShow, imgList }">
                                <view class="flex flex-wrap align-start flex Rzrider_fd2_0_c5_c1">

                                    <view v-for="(image, index) in input4" :key="index" class='flex position-relative'>
                                        <text class='fu-iconfont2 position-absolute Rzrider_fd2_0_c5_c100' @tap.stop="$refs.benbenImagesUploadfd2_0_c5_c1.delImage(index)">&#xE8E7;</text>
                                        <image class='Rzrider_fd2_0_c5_c101' @tap.stop="$refs.benbenImagesUploadfd2_0_c5_c1.previewImage(index)" mode="aspectFill" :src='image'></image>
                                    </view>

                                    <image class='Rzrider_fd2_0_c5_c101' @tap.stop="$refs.benbenImagesUploadfd2_0_c5_c1.manyChooseImage()" v-if="input4.length < 2" mode="aspectFit" :src='STATIC_URL+"131.png"'></image>
                                    <text class='image_upload_tips Rzrider_fd2_0_c5_c12' style="color: rgba(0, 0, 0, 0);">最多上传{{num}}/{{maxlength}}张图片</text>
                                </view>
                            </template>
                        </benben-images-upload>
                    </view>
                    <view class='flex flex-direction align-stretch self-center Rzrider_fd2_0_c6'>
                        <text class='Rzrider_fd2_0_c5_c0'>提现收款码</text>
                        <view class='flex flex-direction align-center justify-between Rzrider_fd2_0_c6_c1'>
                            <benben-image-upload :path.sync="input5" :is-cropping="false" :is-show-clean="false" class="upload position-relative">

                                <image class=" Rzrider_fd2_0_c6_c1_c0_image" mode="aspectFill" :src="input5 ? input5 : STATIC_URL+'131.png'"></image>
                            </benben-image-upload>
                        </view>
                        <text class='Rzrider_fd2_0_c6_c2'>为保障您的收益权益，请上传真实的收款码</text>
                    </view>
                    <text class='Rzrider_fd2_0_c7'>注：
                        为保证平台用户安全性，需要您进行实名认证，实名认证通过之后即可登录并在平台进行接单</text>
                </view>
            </view>

            <!---认证信息flex布局结束-->
            <!--性别学校选择器开始 -->
            <benben-picker ref="benbenWritePickerCodepicker3" :visible.sync="pickerDiy1716543663601" :label.sync='sexLable' :value.sync='sexValue' 
			:options='sexType' mode='selector' :mask-show='true' :timeout='true' :picker-height='88' default-type='value' :default-props='{"label":"name","value":"value"}'>
                <template #picker-header>
                    <view class='flex flex-wrap align-center justify-between Rzrider_picker3_0'>
                        <text class='Rzrider_picker3_0_c0' @tap="$refs.benbenWritePickerCodepicker3.cancel()">取消</text>
                        <text class='Rzrider_picker3_0_c1'>性别</text>
                        <text class='Rzrider_picker3_0_c2' @tap="$refs.benbenWritePickerCodepicker3.pickerConfirm()">确定</text>
                    </view>
                </template>
            </benben-picker>
            <!--性别学校选择器结束 -->
            <!--选择学校选择器开始 -->
            <benben-picker ref="benbenWritePickerCodepicker4" :visible.sync="pickerDiy1716542865565" :label.sync='schoolLable' :value.sync='schoolValue' 
			:options='schoolType' mode='selector' :mask-show='true' :timeout='true' :picker-height='88' default-type='aid' :default-props='{"label":"name","value":"aid"}'>
                <template #picker-header>
                    <view class='flex flex-wrap align-center justify-between Rzrider_picker4_0'>
                        <text class='Rzrider_picker4_0_c0' @tap="$refs.benbenWritePickerCodepicker4.cancel()">取消</text>
                        <text class='Rzrider_picker4_0_c1'>选择学校</text>
                        <text class='Rzrider_picker4_0_c2' @tap="$refs.benbenWritePickerCodepicker4.pickerConfirm()">确定</text>
                    </view>
                </template>
            </benben-picker>
            <!--选择学校选择器结束 -->
            <view class="flex flex-direction align-center benben-position-layout flex Rzrider_flex_5">
                <button class='Rzrider_fd5_0' @tap.stop="getda463211ace2c5Func()">提交</button>
                <view class='flex flex-wrap align-center Rzrider_fd5_1'>
                    <benben-flex-switch-new class-name='flex flex Rzrider_fd5_1_c0' v-model="select" :disabled='false' :auto='true'>
                        <template v-slot:checked>

                            <view class='flex flex position-relative align-center'>
                                <image class='Rzrider_checkfd5_1_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"2.png"'></image>
                            </view>

                        </template>
                        <template v-slot:unchecked>

                            <view class='flex flex position-relative justify-end align-center'>
                                <image class='Rzrider_checkfd5_1_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"3.png"'></image>
                            </view>

                        </template>
                    </benben-flex-switch-new>
                    <text class='Rzrider_fd5_1_c1'>我已阅读并同意</text>
                    <text class='Rzrider_fd5_1_c2' @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/my/recruitXy/recruitXy`">《骑手招募协议》</text>
                </view>

            </view>
            <view :style="{height: '240rpx'}"></view>


        </view>
    </page-body>
</template>
<script>
    import {
        validate
    } from '@/common/utils/validate.js'

    export default {
        components: {},


        data() {
            return {
                "pickerDiy1716542865565": false,
                "pickerDiy1716543663601": false,
                "fd2_0_c6_c1_c0id": "",
                "sexType": [{
                    "name": "男",
                    "value": "1",
                    "image": ""
                }, {
                    "name": "女",
                    "value": "2",
                    "image": ""
                }],
                "sexValue": "",
                "sexLable": "",
                "schoolType": [],
                "schoolValue": "",
                "schoolLable": "",
                "select": false,
                "input1": "",
                "input2": "",
                "input3": "",
                "input4": [],
                "input5": "",
                "id": "",
				detail:'',
				postType:false,
				rider_background:'',
            };
        },
        computed: {

        },
        watch: {},
        onLoad(options) {
            let {
                id
            } = options
            if (id !== undefined) this.id = id
			if(options.id){
				this.id = id
				this.getju46dbd2786211Func()
			}
            this.getub66f98f91a240Func()
			this.post6673ead3a1831()
        },
        onUnload() {

        },
        onReady() {

        },
        onShow() {

        },
        onHide() {

        },
        onResize() {

        },
        onPullDownRefresh() {

        },
        onReachBottom(e) {

        },
        onPageScroll(e) {

        },
        methods: {
			async post6673ead3a1831(){
				let datadetail = await this.$api.get(global.apiUrls.post6673ead3a1831);
				if (datadetail.data.code != 1) {
				    this.$message.info(datadetail.data.msg);
				    return
				}
				let infodetail = datadetail.data;
				// console.log(infodetail,'接收参数')
				this.rider_background = infodetail.data.rider_background
			},
			
			//骑手认证资料
			async getju46dbd2786211Func() {
			    //请求方法
			    //数据验证
			    let datadetail = await this.$api.get(global.apiUrls.post646dbd2786211);
			    if (datadetail.data.code != 1) {
			        this.$message.info(datadetail.data.msg);
			        return
			    }
			    let infodetail = datadetail.data;
			    this.detail = infodetail.data
				this.input1 = this.detail.name
				this.input2 = this.detail.phone
				this.sexLable = this.detail.sex_name
				this.sexValue = this.detail.sex
				this.schoolLable = this.detail.school_name
				this.schoolValue = this.detail.school_id
				this.input3 = this.detail.id_number
				this.input4 = this.detail.card_image
				this.input5 = this.detail.cash_ewm
			},
            //首页=》查询学校列表
            async getub66f98f91a240Func() {
                //请求方法
                //数据验证

                let dataschoolType = await this.$api.get(global.apiUrls.post666f98f91a240, {

                });

                if (dataschoolType.data.code != 1) {
                    this.$message.info(dataschoolType.data.msg);
                    return
                }
                let infoschoolType = dataschoolType.data;
                this.schoolType = infoschoolType.data

            },
            //骑手认证
            async getda463211ace2c5Func() {
                if (!validate(this.input1, 'require')) {
                    this.$message.info('请输入姓名');
                    return false;
                }
                if (!validate(this.input2, 'require')) {
                    this.$message.info('请输入手机号');
                    return false;
                }
                if (!validate(this.input2, 'phone')) {
                    this.$message.info('请输入正确手机号');
                    return false;
                }
				if (!validate(this.sexValue, 'require')) {
				    this.$message.info('请选择性别');
				    return false;
				}
				
                if (!validate(this.schoolValue, 'require')) {
                    this.$message.info('请选择学校');
                    return false;
                }
                if (!validate(this.input3, 'require')) {
                    this.$message.info('请输入学号');
                    return false;
                }
                if (this.input4.length == 0) {
                    this.$message.info('请上传学生证或者身份证');
                    return false;
                }
                if (!validate(this.input5, 'require')) {
                    this.$message.info('请上传提现收款码');
                    return false;
                }
                if (this.select === false) {
                    this.$message.info('请勾选协议');
                    return false;
                }
                //请求方法
                //数据验证
				if(this.postType){
					return
				}
				this.postType = true
                let data6463211ace2c5 = await this.$api.post(global.apiUrls.post6463211ace2c5, {
                    name: this.input1,
                    phone: this.input2,
                    sex: this.sexValue,
                    id_number: this.input3,
                    school_id: this.schoolValue,
                    card_image: this.input4.toString(),
                    cash_ewm: this.input5
                });

                if (data6463211ace2c5.data.code != 1) {
                    this.$message.info(data6463211ace2c5.data.msg);
					this.postType = false
                    return
                }
                let info6463211ace2c5 = data6463211ace2c5.data;


                this.$urouter.redirectTo(`/pages/my/revieweds/revieweds`);
            }
        }
    };
</script>
<style lang="scss" scoped>
    .page {
        width: 100vw;
        overflow-x: hidden;
        min-height: calc(100vh - var(--window-bottom));
        background: var(--benbenbgColor1);
        background-size: 100% auto;
    }

    .Rzrider_flex_0 {
        border-bottom: 1px solid #eee;
        background: #fff;
        width: 750rpx;
        height: 88rpx;
        overflow: hidden;
        z-index: 100;
        top: 0rpx;
        background-size: 100% auto !important;
    }

    .Rzrider_fd0_1 {
        color: #333333;
        font-size: 36rpx;
        font-weight: 500;
        line-height: 50rpx;
    }

    .Rzrider_fd0_0_c0 {
        width: 20rpx;
        height: 36rpx;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
        margin: 0rpx 0rpx 0rpx 32rpx;
    }

    .Rzrider_fd0_0 {
        width: 100rpx;
        height: 88rpx;
    }

    .Rzrider_fd1_0 {
        width: 750rpx;
        height: 270rpx;
    }

    .Rzrider_fd2_0_c7 {
        color: #999999;
        font-size: 28rpx;
        font-weight: 400;
        line-height: 40rpx;
    }

    .Rzrider_fd2_0_c6_c2 {
        color: #169EF0;
        font-size: 28rpx;
        font-weight: 500;
        line-height: 40rpx;
        text-align: center;
        margin: 20rpx 0rpx 0rpx 0rpx;
    }

    .Rzrider_fd2_0_c6_c1_c0_image {
        width: 686rpx;
        height: 365rpx;
        border-radius: 16rpx;
    }

    .Rzrider_fd2_0_c6_c1 {
        background: #fff;
        background-size: 100% auto !important;
    }

    .Rzrider_fd2_0_c6 {
        padding: 0rpx 0rpx 32rpx 0rpx;
    }

    .Rzrider_fd2_0_c5_c12 {
        font-size: 32rpx;
        color: #d5d5d5;
    }

    .Rzrider_fd2_0_c5_c101 {
        width: 670rpx;
        height: 365rpx;
		margin-bottom: 24rpx;
    }

    .Rzrider_fd2_0_c5_c100 {
        top: 0rpx;
        right: 0rpx;
        z-index: 10;
        color: #ff5536;
    }

    .Rzrider_fd2_0_c5_c1 {
        width: 670rpx;
    }

    .Rzrider_fd2_0_c5_c0 {
        color: #333333;
        font-size: 28rpx;
        font-weight: 400;
        line-height: 40rpx;
        margin: 0rpx 0rpx 24rpx 0rpx;
    }

    .Rzrider_fd2_0_c5 {
        margin: 32rpx 0rpx 40rpx 0rpx;
    }

    .Rzrider_fd2_0_c2_c2 {
        width: 14rpx;
        height: 26rpx;
        margin: 0rpx 0rpx 0rpx 16rpx;
    }

    .Rzrider_fd2_0_c0_c1 {
        text-align: right;
        font-size: 28rpx;
        font-weight: 400;
        color: #333;
        margin: 0rpx 0rpx 0rpx 32rpx;
    }

    .Rzrider_fd2_0_c0_c0 {
        color: #333333;
        font-size: 28rpx;
        font-weight: 400;
        line-height: 40rpx;
    }

    .Rzrider_fd2_0_c0 {
        border-bottom: 1px solid #eee;
        background: #fff;
        padding: 32rpx 0rpx 32rpx 0rpx;
        background-size: 100% auto !important;
    }

    .Rzrider_fd2_0 {
        background: #fff;
        background-size: 100% auto !important;
        padding: 0rpx 32rpx 96rpx 32rpx;
    }

    .Rzrider_picker3_0_c2 {
        color: #FF8E21;
        font-size: 28rpx;
        font-weight: 700;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
    }

    .Rzrider_picker3_0_c1 {
        color: #333333;
        font-size: 36rpx;
        font-weight: 700;
        line-height: 50rpx;
        text-align: left;
        font-style: normal;
    }

    .Rzrider_picker3_0_c0 {
        color: #999999;
        font-size: 28rpx;
        font-weight: 400;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
    }

    .Rzrider_picker3_0 {
        border-bottom: 1px solid #eee;
        background: #fff;
        padding: 0rpx 32rpx 0rpx 32rpx;
        border-radius: 24rpx 24rpx 0rpx 0rpx;
        background-size: 100% auto !important;
        height: 110rpx;
    }

    .Rzrider_picker4_0_c2 {
        color: #FF8E21;
        font-size: 28rpx;
        font-weight: 700;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
    }

    .Rzrider_picker4_0_c1 {
        color: #333333;
        font-size: 36rpx;
        font-weight: 700;
        line-height: 50rpx;
        text-align: left;
        font-style: normal;
    }

    .Rzrider_picker4_0_c0 {
        color: #999999;
        font-size: 28rpx;
        font-weight: 400;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
    }

    .Rzrider_picker4_0 {
        border-bottom: 1px solid #eee;
        background: #fff;
        padding: 0rpx 32rpx 0rpx 32rpx;
        border-radius: 24rpx 24rpx 0rpx 0rpx;
        background-size: 100% auto !important;
        height: 110rpx;
    }

    .Rzrider_flex_5 {
        background: var(--benbenbgColor1);
        width: 750rpx;
        height: 240rpx;
        overflow: hidden;
        z-index: 10;
        bottom: calc(0rpx + var(--window-bottom));
        background-size: 100% auto;
    }

    .Rzrider_fd5_1_c2 {
        color: #169EF0;
        font-size: 24rpx;
        font-weight: 400;
        line-height: 33rpx;
    }

    .Rzrider_fd5_1_c1 {
        color: rgba(153, 153, 153, 1);
        font-size: 24rpx;
        font-weight: 400;
        line-height: 33rpx;
    }

    .Rzrider_checkfd5_1_c0_c0_c0 {
        width: 30rpx;
        height: 30rpx;
    }

    ::v-deep .Rzrider_fd5_1_c0 {
        margin: 0rpx 16rpx 0rpx 0rpx;
    }

    .Rzrider_fd5_1 {
        margin: 56rpx 0rpx 0rpx 0rpx;
    }

    .Rzrider_fd5_0 {
        background: #FF8E21;
        border-radius: 44rpx 44rpx 44rpx 44rpx;
        font-size: 32rpx;
        color: var(--benbenFontColor3);
        width: 686rpx;
        height: 88rpx;
        line-height: 88rpx;
        font-weight: 500;
    }
</style>